<template>
  <a-drawer
      title="添加分类"
      :visible="visible"
      :width="500"
      :maskClosable="false"
      :body-style="{
      paddingBottom: '80px',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
      @close="closeModal"
  >
    <section>
      <a-form layout="vertical">
        <a-form-item label="分类名称" v-bind="validateInfos.cat_name">
          <a-input v-model:value="modelRef.cat_name" placeholder="请填写分类名称"/>
        </a-form-item>
        <a-form-item label="排序值（排序值越大，越靠前）" >
          <a-input v-model:value="modelRef.sort" placeholder="请填写排序值"/>
        </a-form-item>
        <a-form-item label="状态" >
          <a-switch
              :checkedValue="1"
              :unCheckedValue="0"
              v-model:checked="modelRef.status"
              checked-children="展开"
              un-checked-children="隐藏"
          />
        </a-form-item>
      </a-form>
    </section>

    <div class="drawer-footer">
      <a-space>
        <a-button @click.prevent="closeModal">取消</a-button>
        <a-button type="primary" @click.prevent="onSubmit" :loading="loadinges">{{ loadinges ? "保存中" : "保存"}}</a-button>
      </a-space>
    </div>

  </a-drawer>
</template>

<script>
import { defineComponent, ref, reactive, watch, computed, toRefs, nextTick } from "vue";
import request from "@/common/utils/request";
import {Form, message} from "ant-design-vue";
import {DownOutlined,DeleteOutlined,CloseOutlined } from "@ant-design/icons-vue";
import utils from "@/common/utils/utils";

const useForm = Form.useForm;

export default defineComponent({
  name: "CollectionRecord",
  components: { DownOutlined, DeleteOutlined ,CloseOutlined},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    village_id: {
      type: Number,
      default: 0,
    },
    id: {
      type: Number,
      default: 0,
    },

  },
  setup(props, context) {
    const state = reactive({
      loadinges:false,
    });

    /**
     * @description: 表单字段
     */

    const modelRef = reactive({
      village_id: props.village_id,
      cat_name: '',
      sort:'',
      status:1,
    });

    /**
     * @description: 验证规则
     */
    const requiredRule = [{ required: true, message: "必填项" }];
    const rulesRef = reactive({
      cat_name: requiredRule,
    });

    /**
     * @description: 创建表单
     */
    const { resetFields, validate, validateInfos } = useForm(
        modelRef,
        rulesRef
    );

    /**
     * @description: 触发关闭
     */
    const closeModal = () => {
      context.emit("onCancel");
    };

    const onSubmit = () => {
      if(props.id){
        edit()
      }else {
        add()
      }
    }

    const add = () => {
      validate().then(() => {
        state.loadinges = true
        const params = { ...modelRef };
        request.post("/village", "/org/village/phone/category", params)
            .then((res) => {
              message.success(res.msg || "创建成功");
              context.emit("onCancel",'ok');
              state.loadinges = false
            }).catch((err) => {
          message.error(err.data.msg);
          state.loadinges = false
        });
      });
    }

    const edit = () => {
      validate().then(() => {
        state.loadinges = true
        const params = { ...modelRef };
        params.id = props.id
        request.put("/village", "/org/village/phone/category", params)
            .then((res) => {
              message.success(res.msg || "编辑成功");
              context.emit("onCancel",'ok');
              state.loadinges = false
            }).catch((err) => {
          message.error(err.data.msg);
          state.loadinges = false
        });
      });
    }

    const radioStyle = reactive({
      display: 'inline-block',
      height: '30px',
      lineHeight: '30px',
    });

    const getdetile = () => {
      request.get("/village", `/org/village/phone/category/${props.id}`).then((res) => {
        modelRef.cat_name = res.detail.cat_name
        modelRef.sort = res.detail.sort
        modelRef.status = res.detail.status
      }).catch((err) => {
        message.error(err.data.msg);
      });
    }

    const init = () => {
      if(props.id){
        getdetile()
      }
    };


    init();

    return {
      validateInfos,
      modelRef,
      resetFields,
      radioStyle,
      ...toRefs(state),
      closeModal,
      onSubmit,
      getdetile,
    };
  },
});
</script>

<style lang="less" scoped>

.box{
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
}
.boxs{
  padding: 7px 0;
}

:deep(.ant-tabs-bar){
  margin: 0;
  border-bottom: 1px solid #f0f0f0;
  outline: none;
  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.boxes{
  min-height: 100px;
  padding: 20px;
  border-left: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}

</style>
